<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #list li {
            list-style-type: none;
            width: 80px;
            height: 30px;
            line-height: 30px;
            background-color:beige;
            text-align: center;
            float: left;
            margin-left: 5px;
        }

        #list li.current {
            background-color: burlywood;
        }

        #list li a {
            text-decoration: none;
        }
    </style>
    <script src="tools.js"></script>
    <script>
        window.onload = function () {
        var ul = getEleById('list');
        var a_arr = ul.getElementsByTagName('a');
        for(var i=0;i<a_arr.length;i++){
            a_arr[i].onclick = function () {
                this.parentNode.className = 'current';
                var otherArr = getAllSibings(this.parentNode);
                for(var  j=0;j<otherArr.length;j++){
                    otherArr[j].className = '';
                }
            }
        }
        }
    </script>
</head>
<body>

<div id="menu">
    <ul id="list">
        <li class="current"><a href="#">首页</a></li>
        <li><a href="javascript:void(0)">播客</a></li>
        <li><a href="javascript:void(0)">博客</a></li>
        <li><a href="javascript:void(0)">相册</a></li>
        <li><a href="javascript:void(0)">关于</a></li>
        <li><a href="javascript:void(0)">帮助</a></li>
    </ul>
</div>

</body>
</html>